import { Button } from 'antd';
import React, { useEffect, useState } from 'react';
import workbenchBg from '@/assets/images/background/workbenchBg.png';
import ModelSelect from '@/pages/modelManage/components/ModelSelect';
import ModelInput from '@/pages/modelManage/components/ModelInput';
import ModelAdd from '@/pages/modelManage/components/ModelAdd';
import ModelConfig from '@/pages/modelManage/components/ModelConfig';
import useModal from '@/hooks/use-modal/useModal';
import { GetDefaultListRes, GetModelListModels, GetProviderListItem } from '@/common/types';

interface Props {
  defaultModelData?: GetDefaultListRes;
  getDeaultList: () => void;
}

const CloudModelConfig = ({ defaultModelData, getDeaultList }: Props) => {
  const modal = useModal('select', 'input', 'addModel', 'config');
  const [updateData, setUpdateData] = useState<GetProviderListItem>();
  const [refresh, setRefresh] = useState<number>(0);
  const [defaultModelAdd, setDefaultModelAdd] = useState<GetModelListModels>();

  const handleUpdateModel = (value: GetProviderListItem) => {
    setUpdateData(value);
    modal.select.close();
    modal.input.open();
  };

  const handleModelAddDefault = (value: GetModelListModels) => {
    setDefaultModelAdd(value);
    modal.addModel.open();
  };

  const handleInputClose = () => {
    modal.input.close();
    modal.select.open();
    // modal.config.open();
  };

  const handleInputOk = () => {
    modal.input.close();
    modal.config.open();
  };

  const handleModelAddClose = () => {
    modal.addModel.close();
    setDefaultModelAdd(undefined);
  };

  const addModelSubmit = () => {
    setRefresh(refresh + 1);
    modal.addModel.close();
  };

  const handleModelConfigCancel = () => {
    modal.config.close();
    modal.input.open();
  };

  const handleModelConfigSubmit = () => {
    modal.config.close();
    getDeaultList();
  };

  return (
    <>
      <div
        className="mb-4 flex h-[158px] flex-col justify-between rounded-xl bg-@brand-color-light p-6"
        style={{
          border: '1px solid #fff',
          backgroundImage: `url(${workbenchBg})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <div>
          <div className="mb-1 text-base font-semibold text-text-5">云端模型配置</div>
          <div className="text-sm leading-[22px] text-text-4">
            系统需要配置模型供应商后才可进行模型对话和相应编排
          </div>
        </div>
        <div>
          <Button type="primary" onClick={modal.select.open}>
            立即设置
          </Button>
        </div>
      </div>

      <ModelSelect
        open={modal.select.isOpen}
        onCancel={modal.select.close}
        onOk={handleUpdateModel}
      />

      <ModelInput
        modelData={updateData}
        open={modal.input.isOpen}
        onCancel={handleInputClose}
        onSubmit={handleInputOk}
        updateModel={modal.addModel.open}
        refresh={refresh}
        openSetting={handleModelAddDefault}
        status={false}
        okText="下一步"
        cancelText="上一步"
        onClose={modal.input.close}
      />

      <ModelAdd
        open={modal.addModel.isOpen}
        onCancel={handleModelAddClose}
        onOk={addModelSubmit}
        modelData={updateData}
        defaultValue={defaultModelAdd}
        onClose={modal.addModel.close}
      />

      <ModelConfig
        open={modal.config.isOpen}
        onCancel={handleModelConfigCancel}
        onOk={handleModelConfigSubmit}
        defaultList={defaultModelData}
        okText="完成"
        cancelText="上一步"
        onClose={modal.config.close}
      />
    </>
  );
};

export default CloudModelConfig;
